<template>
	<view class="being">

		<TopCard></TopCard>

		<view class="top-background"></view>

		<view class="hot-card">
			<view class="card-inner">
				<view class="info-title">
					<view class="title-icon">
						<image src="@/static/tabbar/island_on.png"></image>
					</view>
					<view>正在活跃浪屿 <span style="color: #378F99;font-weight: bold;margin: 0 8rpx;">{{fixedIslandList.length + pushIslandList.length-1}}</span> 座</view>
				</view>
				<view class="card-info" v-if="pushIslandList[1]" @click="goIslandDetail(pushIslandList[1].id)">
					<view class="cover">
						<image mode="aspectFill" :src="pushIslandList[1].background"></image>
					</view>
					<view class="card-info-right">
						<view class="name">{{pushIslandList[1].name}}</view>
						<view class="description">{{pushIslandList[1].description}}</view>
					</view>
					<uni-icons type="right" size="15" color="#8b8b8b"></uni-icons>
				</view>
				
				<view class="card-info" v-if="!pushIslandList[1] && fixedIslandList[0]" @click="goIslandDetail(fixedIslandList[0].id)">
					<view class="cover">
						<image mode="aspectFill" :src="fixedIslandList[0].background"></image>
					</view>
					<view class="card-info-right">
						<view class="name">{{fixedIslandList[0].name}}</view>
						<view class="description">{{fixedIslandList[0].description}}</view>
					</view>
					<uni-icons type="right" size="15" color="#8b8b8b"></uni-icons>
				</view>
			</view>
		</view>



		<view class="content">
			<view class="title">
				<view class="text">常驻浪屿</view>
				<view class="mark"></view>
				<view class="right" @click="toIslandManage">
					<view>全部</view>
					<uni-icons style="margin-left: 10rpx;" type="right" size="10" color="#8b8b8b"></uni-icons>
				</view>
			</view>
			<view class="fixed-island-list" v-if="fixedIslandList != null && fixedIslandList.length > 0">
				<view v-for="island in fixedIslandList">
					<view class="island" @click="goIslandEnjoy(island.id,island.type)">
						<view class="cover">
							<image mode="aspectFill" :src="island.background"></iamge>
						</view>
						<view class="name">{{island.name}}</view>
					</view>
				</view>
			</view>
			<view class="fixed-island-empty" v-else>
				<view class="text">暂时没有常驻，去探索发现更多</view>
			</view>
			<view class="title" style="margin-top: 0;">
				<view class="text">推荐浪屿</view>
				<view class="mark"></view>
			</view>
			<view class="island-list">
				<view v-for="(island,index) in pushIslandList" @click="goIslandDetail(island.id)" class="island"
					:style="{'height' : island.id ? '380rpx' : '160rpx' }">
					<view class="cover" v-if="island.id">
						<image mode="aspectFill" :src="island.background"></image>
					</view>
					<view class="info" :style="{'margin-top' : island.id ? '10rpx' : '40rpx' }">
						<view class="info-top">
							<view class="name"># {{island.name}}</view>
							<view class="description">{{island.description}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import SwipperTest from '@/components/Xsuu-swiper.vue'
	import TopCard from '@/components/top-card.vue'
	export default {
		components: {
			SwipperTest,
			TopCard
		},
		data() {
			return {
				fixedIslandList: [],
				pushIslandList: [],
			}
		},
		onLoad() {

		},
		onShow() {
			this.listPushIsland()
			if (this.$isLogin()) {
				this.listFixedIsland()
			}
		},
		methods: {
			listFixedIsland() {
				this.$api.listFixedIsland().then(res => {
					this.fixedIslandList = res.data
				})
			},
			listPushIsland() {
				this.$api.listPushIsland().then(res => {
					this.pushIslandList = res.data
					this.pushIslandList.unshift({
						id: null,
						name: "近期新增浪屿" + 3,
						description: "共417个帖子"
					})
				})
			},

			toIslandManage() {
				if (!this.$isLogin()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_being/island/island-manage'
				})
			},

			goIslandDetail(islandId) {
				if (islandId == null) {
					return
				}
				uni.navigateTo({
					url: '/pages_being/island/island-detail?islandId=' + islandId
				})
			},
			goCourseStudy(courseId) {
				console.log(courseId)
				uni.navigateTo({
					url: '/pages_being/course/course-study?courseId=' + courseId
				})
			},
			goIslandEnjoy(islandId, type) {
				if (type == 0) {
					uni.navigateTo({
						url: '/pages_being/island/memory-island-detail?islandId=' + islandId
					})
				}
				if (type == 1) {
					uni.navigateTo({
						url: '/pages_being/island/post-island-detail?islandId=' + islandId
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages_being/island/article-island-detail?islandId=' + islandId
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.being {
		background-color: #F9F9F9;
		min-height: 100vh;


		.top-background {
			position: absolute;
			z-index: 0;
			width: 750rpx;
			height: 320rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 0 0 40rpx 40rpx;
		}

		.hot-card {

			padding-top: 200rpx;
			
			// #ifdef APP
			padding-top: 240rpx;
			// #endif

			// #ifdef H5
			padding-top: 180rpx;
			// #endif


			.card-inner {
				width: 690rpx;
				height: 250rpx;
				margin-left: 30rpx;
				background-color: #FFFFFF;
				z-index: 3;
				position: relative;
				border-radius: 20rpx;


				.info-title {
					width: 650rpx;
					padding: 20rpx;

					display: flex;
					flex-direction: row;
					align-items: center;


					.title-icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}


				}

				.card-info {
					width: 650rpx;
					padding: 0 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.cover {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.card-info-right {
						width: 380rpx;
						height: 110rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;


						.description {

							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}

				}

			}
		}


		.content {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx 0 30rpx 30rpx;
				position: relative;
				width: 690rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.mark {
					width: 45rpx;
					height: 35rpx;
					background-color: #B3DFDE;
					border-radius: 40%;
					position: absolute;

					top: 5rpx;
					left: 0;
					z-index: 1;
				}

				.text {
					padding-left: 15rpx;
					position: relative;
					z-index: 2;
					letter-spacing: 4rpx;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					margin-bottom: 5rpx;
					font-weight: normal;
				}

			}

			.fixed-island-empty {
				width: 690rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
				background-repeat: no-repeat;
				background-size: cover;

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					letter-spacing: 5rpx;
					background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: bold;
				}


			}

			.fixed-island-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 690rpx;
				margin-left: 30rpx;
				flex-wrap: wrap;

				.island {
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;

					background-image: url(https://www.cdn.kxcdedu.top/image/default/8961DBC12C8A449E8B08567E269E8B02-6-2.png);
					background-repeat: no-repeat;
					background-size: cover;

					width: 330rpx;
					height: 230rpx;



					.cover {
						width: 200rpx;
						height: 120rpx;
						border-radius: 20rpx;
						overflow: hidden;
						color: white;

						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-end;
						box-shadow: 1px 1px 8px 2px #e9eee9;

						margin: 40rpx 0 0 30rpx;
					}

					.name {
						margin-top: 15rpx;
						margin-left: 30rpx;
					}

				}



			}

			.island-list {
				column-count: 2;
				column-gap: 30rpx;


				width: 690rpx;
				margin-left: 30rpx;
				margin-bottom: 40rpx;


				.island {
					width: 330rpx;
					height: 380rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					page-break-inside: avoid;


					margin-bottom: 30rpx;
					border-radius: 10rpx;

					background-color: #FFFFFF;
					box-shadow: 0 0 4px 1px #f0f4f0;

					.cover {
						width: 330rpx;
						height: 200rpx;
						border-radius: 10rpx 10rpx 0 0;
						overflow: hidden;
						margin-bottom: 10rpx;
					}

					.info {
						width: 290rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin: 10rpx 0;


						.info-top {
							.name {}

							.description {
								margin-top: 10rpx;
								font-size: 28rpx;
								color: gray;

								/*超过范围进行隐藏不显示*/
								overflow: hidden;
								/*文本溢出, 使用省略号 */
								text-overflow: ellipsis;
								/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
								display: -webkit-box;
								/*限制块容器显示的文本行数, 按照你的需求设置*/
								-webkit-line-clamp: 2;
								/*盒子的方向, 垂直、水平等*/
								-webkit-box-orient: vertical;
								/*文字换行, 可以在单词内断*/
								word-wrap: break-word;
							}

						}

						.tags {
							display: flex;
							flex-direction: row;


							.tag {
								font-size: 24rpx;
								color: #277D85;
								padding: 8rpx 20rpx;
								background-color: #DAEFEE;
								border-radius: 30rpx;
								margin-right: 20rpx;
							}
						}

					}

				}
			}

		}

	}


	img {
		width: 100%;
		height: 100%;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
